<template>
    <view class="charge-select pd-v-24 pd-h-20">
        
        <view class="charge-select__header pd-v-24 pd-t-32 pd-b-24 bg-white border8">
            <view class="flex flex-end">
                <view class="price font52 lh-52 color-default flex flex-end">
                    <view class="font32 lh-32">
                        ￥
                    </view>
                        {{storeDetail.chargeFee}}
                </view>
                <view class="flex-1 unit font28 lh-28 color-default">
                    /度+服务费
                </view>
            </view>

            <view class="font32 lh-44 color-default bold mr-t-32 " @click="callPhone(storeDetail.repairPhone)">
                {{deviceInfo.deviceName}}{{ storeDetail.repairPhone ? `（${storeDetail.repairPhone}）` : ''}}
            </view>

            <view class="mr-t-16 font26 lh-36 color-info">
                {{storeDetail.spliceAddress}}
            </view>
              
              
        </view>

        <view class="charge-select__body">

            <view class="mr-t-20 pd-t-40 bg-white border8">
                <view class="flex flex-center pd-v-24">
                    <view class="font28 lh-28 color-default bold">
                        充电位置
                    </view>

                    <view class="font24 lh-28 color-info">
                        （请选择充电位置）
                    </view>
                      
                      
                </view>
                <view class="flex flex-wrap charge-list pd-t-32 pd-b-44 full-w">
                    <view   
                        class="charge-list__item flex flex-ver flex-center flex-j-center mr-v-8 border8 mr-h-8" 
                        v-for="(item,index) in deviceInfo?.socketVoList" 
                        :key="'index'+index" 
                        :class="{used:item.status == 'WORKING',active:activeItem == item}"
                        @click="setActiveItem(item)"
                    >
                        
                        <image class="" v-if="item.status == 'FREE'" src="@/static/charge_active.png" style="width:48rpx;" mode="widthFix" />
                        <image class="" v-else src="@/static/charge.png" style="width:48rpx;" mode="widthFix" />
                        <view class="font24 lh-34 color-default mr-t-8 line1 full-w txt-center">
                            {{item.port}}
                        </view>

                        <view class="status font20 lh-28 txt-center pd-h-4 mr-t-12" :class="item.status == 'FREE' ? 'active' : ''">
                            {{  item.status == 'FREE' ? '空闲' : 
                                item.status == 'WORKING' ? '使用中' : 
                                item.status == 'BREAKDOWN' ? '故障' : ''}}
                        </view>
                    </view>
                        
                </view>
            </view>
        </view>


        <view class="charge-select__footer mr-t-40 pd-v-52">
            
            <u-button type="primary" shape="circle" color="#35BE65" text="充电" @click="goCharge"></u-button>
        </view>
          
          
          
  </view>
</template>

<script setup>

import { useStore } from '@/store/index.js';
import { getStoreInfoByDeviceCode,getDeviceInfoById } from "@/api/index/index.js";

import { computed, ref, onMounted, reactive,defineProps } from "vue";
import { onLoad } from '@dcloudio/uni-app';

const store = useStore();

const isWx = ref(false)
const redirectURL = ref('/pages/index/index')
const activeItem = ref(null)
const storeDetail = ref({})
const deviceId = ref('')
const deviceInfo = ref({})

const props = defineProps({
    deviceNumber: {
        type: String,
        default: ''
    }
})

onLoad((options) => {
    console.log(options,'options')
    getStoreInfoByDeviceCodeFn()
});

const getStoreInfoByDeviceCodeFn = () => {
    getStoreInfoByDeviceCode({code:props.deviceNumber}).then(res => {
        console.log(res,'resssssss')
        if(res.code == 200) {
            storeDetail.value = res.data
            deviceId.value = res.data.deviceId

            getDeviceById()
        }
    })
}


const getDeviceById = () => {
    getDeviceInfoById({id:deviceId.value}).then(res => {
        console.log(res,'res')
        if(res.code == 200) {
            deviceInfo.value = res.data
        }
    })
}


const setActiveItem = (item) => {
    if(item.status == 'WORKING') {
        uni.showToast({
            title:'该插座正在使用中',
            icon:'none'
        })
        return;
    } else if(item.status == 'FREE') {
        activeItem.value = item
    } else if(item.status == 'BREAKDOWN') {
        uni.showToast({
            title:'该插座故障，请尽快联系客服',
            icon:'none'
        })
    }


    
}


const goCharge = () => {
    if(!activeItem.value) {
        uni.showToast({
            title:'请选择充电位置',
            icon:'none'
        })
        return;
    }
    uni.navigateTo({
        url: '/sub_user/pages/chargePayment/chargePayment?deviceNumber=' + props.deviceNumber + '&port=' + activeItem.value.port
    })
}

const callPhone = (num) => {
    uni.makePhoneCall({
        phoneNumber: num,
        success: function () {
            console.log('success');
        },
        fail: function () {
            console.log('fail');
        }
    });
}
</script>

<style lang="scss" scoped>
.charge-select {
    background: #F5F5F5;
    min-height:100vh;

    

    .charge-select__header {
        .price {
            color:rgba(43, 153, 81, 1);
        }
    }


    .charge-list {
        .charge-list__item {
            width:152rpx;
            height:160rpx;
            box-sizing: border-box;
            border:1px solid #E3E3E3;

            
            &.active {
                border: 1px solid #35BE65;
                .status {
                    color:#2B9951;
                    background: rgba(53, 190, 101, 0.2);
                }
            }

            &.used {
                
                .status {
                    color:rgba(51, 52, 54, 0.4);
                    background: #F0F0F0;
                }
            }
            
            .status {
                width:80rpx;
                border-radius: 18rpx;
                color:#2B9951;
                background: rgba(53, 190, 101, 0.2);
            }

        }
    }
} 
</style>
